/*────────────────────────────────────
  Global Reset & Defaults
────────────────────────────────────*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #0033cc; /* cobalt */
  color: #fff;
  line-height: 1.5;
}

/*────────────────────────────────────
  Home Page
────────────────────────────────────*/
body.home-page {
  padding: 2rem;
}

.subtitle {
  font-size: 1rem;
  font-weight: 300;
  opacity: 0.85;
  margin-top: 0.5rem;
   font-family: 'Space Grotesk', sans-serif;
}
.subtitle {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.cursor {
  border-right: 2px solid #fff;
}

/* Typewriter animation */
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50%      { border-color: #fff; }
}

.subtitle.cursor {
  animation:
    typing 2.5s steps(40, end) forwards,
    blink-caret .75s step-end infinite;
}
.watch-count {
  font-size: 1rem;
  opacity: 1;
  margin-top: 0.5rem;
  text-align: center;
  font-family: 'DotGothic16';
  color: #fff;
  border: none;
  text-decoration: none;
}



/* Header */
.home-header {
  text-align: left;
  margin-bottom: 2rem;
  font-family: 'DotGothic16';
}
.home-header h1 {
  font-size: 2.5rem;
  letter-spacing: -0.5px;
    font-family: 'DotGothic16';

}

/* carousel wrapper */
.featured-assets.carousel {
  overflow: hidden;
  position: relative;
  padding: 2rem 0;               /* vertical breathing room */
}

/* slides container */
.carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
    overflow-x: auto;       /* Enables horizontal scrolling if needed */

}

/* individual slides */
.hero-slide {
  flex: 0 0 auto;
  margin: 0 1rem;
  transform: scale(0.75);
  opacity: 0.6;
  transition: transform 0.5s ease, opacity 0.5s ease;
   text-decoration: none !important;
  border: none !important;
}

@media (max-width: 768px) {
  .carousel-container {
    flex-direction: column;
    align-items: center;
  }

    .hero-slide img {
  max-width: 100%;
  height: auto;
  width: 30vw;              /* Responsive: ~3 images on screen */
  flex-shrink: 0;           /* Prevent shrinking smaller than width */
  scroll-snap-align: center;
}
  
}

/* active slide */
.hero-slide.active {
  transform: scale(1);
  opacity: 1;
  z-index: 1;
   text-decoration: none !important;
  border: none !important;
}

/* adjacent slides (optional) */
.hero-slide.prev,
.hero-slide.next {
  transform: scale(0.85);
  opacity: 0.8;
}
.hero-slide .watch-count {
  display: none;
}
.hero-slide.active .watch-count {
  display: block;
}

/* full-width box under ticker */
.recent-exits {
  width: 100%;
  margin: 2rem 0;                 /* vertical gap above & below */
  border: 1px solid #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  background: rgba(255,255,255,0.05); /* subtle backdrop if you want */
}

/* widget title styling */
.recent-exits .widget-title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #fff;
  padding-bottom: 0.25rem;
}

/* list layout */
.recent-exits-list ul {
  list-style: none;
  display: flex;
  justify-content: space-between; /* spreads items evenly */
  gap: 1rem;
  padding: 1rem;
  margin: 0;
}

/* individual exit items */
.recent-exits-list li {
  font-size: 1rem;
}

/* asset name vs % */
.exit-name {
  opacity: 1;
}
.exit-pct {
  font-weight: bold;
}


/* Trending & Upcoming Container */
.home-widgets {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Shared Widget Styles */
.trending,
.upcoming {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 1rem;
  flex: 1;
  min-width: 260px;
}



.widget-title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #fff;
  padding-bottom: 0.5rem;
}

/* Trending List */
.trending ul {
  list-style: none;
}
.trending li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.trending li:last-child {
  border-bottom: none;
}
.trending .item-name {
  flex: 1;
}
.trending .pct {
  margin: 0 1rem;
  font-weight: bold;
}
.trending .view-btn {
  background: none;
  border: 1px solid #fff;
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.trending .view-btn:hover {
  background: #e6ca5a;
  color: #0033cc;
}
/* 1. Define the blink keyframes */
@keyframes blinkGreen {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* 2. Apply it to your % elements */
.trending-list .pct {
  color: #00FF00;                 /* vivid green */
  animation: blinkGreen 1s linear infinite;
}




/* Upcoming Spotlight */
.upcoming-card {
  text-align: center;
  max-height: 350px; 
}
.upcoming-card img {
  max-width: 100%;
  border-radius: 0px;
  height: auto;
    margin-top: -7rem;  /* pulls the image up by 1rem */

}

/*────────────────────────────────────
  Utility / Typography Tweaks
────────────────────────────────────*/
h1, h2, h3, h4, h5 {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 0.5rem;
}

button {
  font-family: inherit;
}

/* Remove any leftover indexPage or shelf styles */
#indexPage,
.shelf-container,
.image-frame,
.section,
ul#portfolioList,
.shelf,
.item,
.button {
  display: none !important;
}


.item-page {
  padding: 40px;
  text-align: center;
}

.item-image {
  max-width: 300px;
  height: auto;
  margin: 20px 0;
}

.button-group {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*────────────────────────────────────────────────────
  Vintage Tech Asset Page Styles
────────────────────────────────────────────────────*/

/* Reset & Box-Sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Page Wrapper */
body.asset-page {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #0033cc; /* Excel cobalt */
  color: #fff;
  margin: 0;
  padding: 2rem 2rem 0;      /* top padding only where you need it */
}

/* HEADER */
header.asset-header {
  margin-bottom: 2rem;
}
.asset-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.asset-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}
.status-live {
  color: #eebf25;
  font-weight: bold;
}

/* MAIN LAYOUT */
main.asset-body {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* CHART CONTAINER */
.asset-chart,
#chart-section {
  flex: 2;
  min-width: 0;
  height: 400px;
}
#priceChart {
  width: 100% !important;
  height: 100% !important;
}

/* RIGHT-SIDEBAR (ALL YOUR PANELS) */
.asset-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 280px;
}

/* SECTION TITLES */
.section-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #fff;
  padding-bottom: 0.3rem;
}

/* TRADE BUTTONS */
.trade-buttons button,
.acquire-button {
  background-color: #fff;
  color: #0033cc;
  border: none;
  padding: 0.6rem 1rem;
  margin: 0.2rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  border-radius: 8px;
}
.acquire-button {
  background-color: #e6ca5a;
}
.trade-buttons button:hover,
.acquire-button:hover {
  transform: scale(1.05);
  background-color: #e6ca5a;
}

/* MARKET INFO LIST */
.market-info ul {
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* INVESTOR SENTIMENT & POSITION */
.sentiment p,
.ownership p {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  text-align: left;
}

/* “ABOUT THIS ASSET” */
.asset-overview {
  width: 100%;
  border-top: 1px solid #fff;
  margin-top: 4rem;
  padding-top: 1.5rem;
  text-align: left;
}

/* ASSET IMAGE & JITTER ANIMATION */
.asset-image {
  margin-top: 1rem;
  max-width: 300px;
  width: 100%;
  height: auto;
  display: block;
  animation: jitter 1.2s infinite ease-in-out;
}

@keyframes jitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* Wrap left & right into two flex columns */
.asset-body {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* Left column: chart + overview */
.asset-left {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Right column (sidebar) */
.asset-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 280px;
}

/* Tweak asset-overview to fit the left column */
.asset-overview {
  width: 100%;
  border-top: 1px solid #fff;
  margin-top: 1rem;
  padding-top: 1rem;
}

/* Ensure the image stays under “Your Position” */
.ownership .asset-image {
  display: block;
  margin-top: 1rem;
  max-width: 100%;
  height: auto;
}

/* ───────────────────────────────────────────────
   Portfolio Page Styles
─────────────────────────────────────────────── */

body.portfolio-page {
  font-family: 'Space Grotesk', sans-serif;
  background-color: #0033cc;
  color: white;
  margin: 0;
  padding: 2rem;
}

/* HEADER */
.portfolio-header {
  text-align: center;
  margin-bottom: 2rem;
   font-family: 'Space Grotesk';
}
.portfolio-header h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
   font-family: 'Space Grotesk';
}

.total-value {
  font-size: 2rem;
  font-weight: bold;
  color: #e7e43d; /* your desired colour */
  font-family: 'DotGothic16', sans-serif; /* or 'Space Grotesk' if you prefer */
}


/* MAIN LAYOUT */
.portfolio-body {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* CHART SECTION */
.portfolio-chart {
  flex: 2;
  min-width: 0;
  height: 400px;
}

/* SIDEBAR */
.portfolio-sidebar {
  flex: 1;
  min-width: 240px;
}
.position-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.position-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.position-list li:last-child {
  border-bottom: none;
}
.asset-name {
  font-weight: 500;
}
.asset-change {
  font-weight: bold;
}
.asset-change::before {
  content: ' ';
}
.asset-change {
  color: var(--change-color);
}
/* positive green, negative red */
.position-list li .asset-change {
  color: inherit;
}
.position-list li:nth-child(odd) .asset-change {
  --change-color: #00ffcc;
}
.position-list li:nth-child(even) .asset-change {
  --change-color: #ff5c5c;
}

/* SECTION TITLE (reuse) */
.section-title {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #fff;
  padding-bottom: 0.3rem;
}
/* ─────────────────────────────────────────────
   Portfolio Extensions: Pie, Watchlist, History
───────────────────────────────────────────── */

/* Layout Hooks */
.portfolio-left { flex: 2; gap:2rem; }
.portfolio-sidebar { flex:1; display:flex; flex-direction:column; gap:2rem; }

/* Allocation Section (Pie) */
.allocation-section {
  height: 300px;
  position: relative;
  margin-top: 3rem;
}
.allocation-section .section-title { margin-bottom:1rem; }

/* Watchlist */
.watch-list {
  list-style:none; padding:0;
}
.watch-list li {
  display:flex; justify-content:space-between; padding:0.6rem 0;
  border-bottom:1px solid rgba(255,255,255,0.2);
}
.watch-btn {
  background:none; border:1px solid #fff; border-radius:4px;
  color:#fff; padding:0.3rem 0.6rem; font-size:0.8rem;
  cursor:pointer; transition:background 0.2s, color 0.2s;
  font-family: 'Space Grotesk';
}
.watch-btn:hover { background:#f0e54d; color:#0033cc; }

/* Closed Positions History */
.history-table {
  width:100%; border-collapse:collapse; font-size:0.9rem;
}
.history-table th,
.history-table td {
  padding:0.6rem; border-bottom:1px solid rgba(255,255,255,0.2);
  text-align:left; color:#fff;
}
.history-table th {
  font-weight:600; border-bottom:2px solid #fff;
}
.history-table tbody tr:last-child td { border-bottom:none; }
/* Chart container */
.portfolio-chart,
.allocation-section,
.asset-chart {
  height: 400px;           /* fixed height */
  overflow: visible;        /* no spilling */
  position: relative;      /* normal flow */
}

/* Canvas in-flow */
#priceChart,
#portfolioChart,
#allocationChart {
  display: block;
  width: 100% !important;
  height: 100% !important;
  user-select: none;
  touch-action: none;
}

/* ──────────────────────────────────────────────────
   CLEAN Trending Widget & Ticker Styles
───────────────────────────────────────────────────*/

/* 1) Outer container must be free to expand */
.trending {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  padding: 1rem;
  overflow: visible !important;   /* ensure nothing is clipped */
  
}

/* 2) Only the list scrolls */
.trending-list {
  max-height: 300px;    /* adjust to taste */
  overflow-y: auto;
  margin-bottom: 1rem;
}

/* reset list styles */
.trending-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trending-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}


/* 3) Ticker always visible below the list */
.ticker {
  overflow: hidden;
  border-top:    1px solid #f0e54d;
  border-bottom: 1px solid #f0e54d;
  margin-top: 4.5rem;
}

.ticker__track {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 16s linear infinite; 
}

.ticker__item {
  font-family: 'DotGothic16', sans-serif;
  font-size: 2rem;
  color: #f0e54d;
  margin-right: 2rem;
}

/* pause on hover */
.ticker:hover .ticker__track {
  animation-play-state: paused;
}

/* seamless loop (duplicate your items in HTML!) */
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* 1) Define the jitter keyframes */
@keyframes jitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* 2) Hook the animation onto your home‐page images */
body.home-page .asset-card img {
  animation: jitter 1.2s infinite ease-in-out;
}
/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* Modal Box */
.buy-modal {
  background: #fff;
  border-radius: 8px;
  width: 400px;           /* ~4in @100dpi */
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  color: #0033cc;
}

.buy-modal h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  text-align: center;
}

.buy-modal label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.buy-modal input[type="number"] {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.buy-modal .total-cost {
  margin-bottom: 1.5rem;
  text-align: center;
  font-weight: bold;
}

.actions {
  display: flex;
  justify-content: space-between;
}



/* Pending Orders styling */
.pending-orders {
  margin-bottom: 1.5rem;
}

.pending-list {
  list-style: none;
  padding-left: 0;
}
.pending-list li {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 0.25rem;
}
/* Pending Orders header underline */
.pending-orders .section-title {
 
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Open Positions box */
.positions {

 
  padding: 1rem 0;
  margin: 1rem 0;   /* space above & below */
}

.positions .section-title {
  margin-bottom: 1rem;
}
.disclaimer-banner {
  background-color: #ffffff;         /* white background */
  color: #0033cc;                    /* your brand blue */
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;               /* slightly smaller than main text */
  font-style: italic;
  border-bottom: 1px solid #cccccc;  /* subtle separator */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;                     /* sits above everything */
}

/* push the rest of the page down so header isn’t hidden */
.asset-page {
  padding-top: 2rem;  /* adjust if your banner is taller or shorter */
}
/* Full-purchase modal uses same look as buy-modal */
.acquire-modal {
  background: #fff;
  border-radius: 8px;
  width: 400px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  color: #0033cc;
}
.acquire-modal h3 {
  margin-top: 0;
  text-align: center;
}
.recent-exits {
  display: none;
}
/* Remove the bullet from Recent Exits list */
.recent-exits-list {
  list-style: none;    /* turns off the dot */
  margin: 0;           /* collapse default UL margins */
  padding: 0;          /* collapse default UL padding */
}

/* (If you want to be extra specific) */
.recent-exits-list li {
  list-style: none;    /* ensure no marker on each LI */
}
/* Total-proceeds label */
.total-proceeds {
  margin: 1rem 0;
  font-weight: bold;
  text-align: center;
}

 
    /* Layout KPI cards horizontally */
    .kpi-cards {
      display: grid;
      gap: 1.5rem;
      justify-content: space-around;
      margin: 1rem 0 2rem;
    }
    .kpi-cards .card {
      flex: 1;
      background: rgba(255,255,255,0.1);
      padding: 1rem;
      border-radius: 8px;
      text-align: center;
    }
    .kpi-cards .card h3 {
      margin: 0 0 0.5rem;
      font-weight: normal;
      color: #fff;
      font-size: 0.9rem;
      font-family: 'Space Grotesk';
    }
    .kpi-cards .card p {
      margin: 0;
      font-size: 1rem;
      color: #fff;
      font-weight: bold;
       font-family: 'Space Grotesk';
    }
    .quick-positions {
        padding: 0.5rem;
    }

        /* KPI cards flex layout */
    .kpi-cards { display:flex; gap:1.5rem; justify-content:space-around; margin:1rem 0 2rem; }
    .kpi-cards .card { flex:1; background:rgba(255,255,255,0.1); padding:1rem; border-radius:8px; text-align:center; }
    .kpi-cards h3 { margin:0 0 .5rem; color:#fff; font-size:.7rem; font-weight:normal; }
    .kpi-cards p { margin:0; font-size:1.25rem; color:#fff; font-weight:bold; }

    /* Account nav */
    .portfolio-header { position:relative; }
 

    /* Quick positions */
    .quick-positions { margin-top:2rem; }
    .quick-list { list-style:none; padding:0; margin:0;  font-family: 'Space Grotesk';}
    .quick-list li { display:flex; justify-content:space-between; align-items:center; padding:.75rem 0; border-bottom:1px solid rgba(255,255,255,0.2); }
    .action-buttons { display:inline-flex; gap:.5rem; }
    .action-buttons button { background:#fff; color:#0033cc; border:none; padding:.4rem .75rem; font-size:.8rem; border-radius:6px; cursor:pointer; transition:transform .1s; }
    .action-buttons button:hover { transform:translateY(-1px); }

    /* Watchlist layout & blinking */
    .watch-list { list-style:none; padding:0; margin:0;  font-family: 'Space Grotesk';}
    .watch-list li { display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,0.2); }
    .watch-name { flex:1; }
    .watch-change { margin:0 .5rem; font-size:.85rem; }
    @keyframes blink { 50% { opacity:0; } }
    .watch-change.positive { color:#0f0; animation:blink 1s step-start infinite; }
    .watch-change.negative { color:#f00; animation:blink 1s step-start infinite; }

    /* Search box */
    .search-box { text-align:left; margin:1rem 0; }
    .search-box input { width:100%; max-width:320px; padding:.5rem; border:none; border-radius:6px; }
        /* Ensure content is pushed below fixed banner */
    body.dashboard-page { padding-top: 2rem; }

    /* Fixed prototype disclaimer banner */
    .disclaimer-banner {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background: #fff;
      color: #0033cc;
      text-align: center;
      padding: .25rem 0;
      font-size: .8rem;
      z-index: 1000;
    }

.history-table {
     font-family: 'Space Grotesk';
}

.activity-list {
     font-family: 'Space Grotesk';
}


    .upcoming-page .asset-container {
      text-align: center;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    .upcoming-page .asset-image img {
      display: block;
      margin: 1rem auto;
      max-width: 100%;
      height: auto;
      align-items: center;
      margin-left: 70%;
    }
    .upcoming-page .asset-title {
      font-size: 2.5rem;
      margin-bottom: 1rem;
      font-family: 'Space Grotesk';
    }
    .upcoming-page .section-heading {
      font-size: 1.75rem;
      margin-top: 2rem;
      margin-bottom: 1rem;
      font-family: 'Space Grotesk';
    }
    .upcoming-page .about-copy {
      margin: 0 auto;
      max-width: 600px;
      text-align: center;

      font-family: 'Space Grotesk';
    }

    a {
  text-decoration: none;
  color: inherit;
}

    .site-nav {
      position: absolute;
      top: 1.5rem;
      right: 1rem;
      z-index: 1000;
    }
    .hamburger {
      font-size: 2rem;
      cursor: pointer;
      user-select: none;
    }
    .nav-menu {
      display: none;
      position: absolute;
      top: 2.5rem;
      right: 0;
      background: none;
      padding: 1rem;
      border-radius: 0.5rem;
      font-family: 'DotGothic16';
    }
    .nav-menu a {
      display: block;
      margin: 0.5rem 0;
      text-decoration: none;
      color: #fff;
      font-size: 1rem;
    }
    .nav-open .nav-menu {
      display: block;
    }

  
    .page-title {
      text-align: center;
      font-size: 2.5rem;
      margin: 4rem 0 2rem;
      color: #fff;
      font-family: 'DotGothic16', sans-serif;
      animation: floatText 5s ease-in-out infinite;
    }
  
    /* News Layout */
    .news-content {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 2rem;
      max-width: 1200px;
      margin: 2rem auto;
    }

 
/* Force vertical stack on mobile */
@media (max-width: 768px) {
  .news-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem;
    align-items: center;
  }

  .news-content > div {
    width: 90% !important;
    max-width: 600px;
    display: block !important;
    float: none !important;
    position: static !important;
  }
}


    .main-article {
      flex: 2;
      text-align: center;
    }
    .main-article img {
      width: 100%;
      max-width: 600px;
      height: auto;
      display: block;
      margin: 0 auto 1rem;
      animation: float 6s ease-in-out infinite;

    }
    .main-article p {
      color: #fff;
      max-width: 600px;
      margin: 0 auto;
      font-family: 'Space Grotesk', sans-serif;
    }
    .side-articles {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    .side-article img {
      width: 100%;
      height: auto;
      display: block;
      margin-bottom: 0.5rem;
      animation: float 7s ease-in-out infinite;
    }
    .side-article p {
      color: #fff;
      font-size: 0.95rem;
      font-family: 'Space Grotesk', sans-serif;
      margin: 0;
      animation: floatText 6s ease-in-out infinite;
    }
    /* Background */
    body {
      background: #0033cc;
      margin: 0;
      padding: 0;
    }
  
       /* Floating Animations */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    @keyframes floatText {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-5px); }
    }
    
/* dim the screen behind */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}

/* the white “card” that holds every modal */
.modal-dialog {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  max-width: 90%;
  width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
   color: #0033cc;
  font-family: 'Space Grotesk';
}

/* unify your headings and text */
.modal-dialog h3 {
  margin-top: 0;
  font-size: 1.25rem;
  color: #0033cc;
  font-family: 'Space Grotesk';
}

/* style the buttons */
.modal-dialog .actions button {
  margin: 0 0.25rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}
.modal-dialog .actions .cancel {
  background: rgb(216, 25, 25);
  color: white;
}
.modal-dialog .actions .confirm {
  background: #00cc33;
  color: white;
}

/* your “Confirmed” screen */
.confirm-modal {
  text-align: center;
}
.confirm-modal .done {
  background: #00cc33;
  color: white;
   color: #0033cc;
  font-family: 'Space Grotesk';
}

#toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.toast {
  background: #00cc33;
  color: white;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  font-family: 'space grotesk';
  animation: fadein 0.3s, fadeout 0.3s 2.7s forwards;
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeout {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

.open-positions .open-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.open-positions .open-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #ffffff33;
}

.open-positions .open-list .position-badge {
  background: #0033cc;
  color: white;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.return-cell.positive { color: #0f0; }
.return-cell.negative { color: #f00; }

.reset-button {
  margin-top: 10px;
  padding: 10px 20px;
  font-weight: bold;
  border: none;
  background: crimson;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

#closed-positions-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

#closed-positions-table th,
#closed-positions-table td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  white-space: nowrap;
}

#closed-positions-table th:nth-child(1),
#closed-positions-table td:nth-child(1) {
  width: 35%;
}

#closed-positions-table th:nth-child(2),
#closed-positions-table td:nth-child(2),
#closed-positions-table th:nth-child(3),
#closed-positions-table td:nth-child(3),
#closed-positions-table th:nth-child(4),
#closed-positions-table td:nth-child(4) {
  width: 21%;
}

.trade-buttons button:disabled { opacity: 0.4; cursor: not-allowed; } 

.position-roi.positive {
  color: #28a745; /* green */
}
.position-roi.negative {
  color: #dc3545; /* red */
}

.asset-roi.positive {
  color: #28a745; /* green */
}
.asset-roi.negative {
  color: #dc3545; /* red */
}

.wallet-section {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}
.wallet-balance-box,
.wallet-transactions-box {
  background: #fff;
  color: #0044cc; /* blue text */
  border-radius: 0.5rem;
  padding: 1rem;
  flex: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.wallet-transactions-box {
  flex: 2;
  max-height: 200px;
  overflow-y: auto;
}
.wallet-transactions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wallet-transactions-list li {
  padding: 0.25rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.9rem;
}
.wallet-transactions-list li:last-child {
  border-bottom: none;
}



.dashboard-page .glass-box {
  width: 100%;
  max-width: 320px;
  background: linear-gradient(135deg, #f3f4f6, #dcdcdc);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  padding: 1.25rem 1.5rem;
  text-align: left;
  color: #000;
  transition: all 0.3s ease-in-out;
}


.glass-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}


.dashboard-page {
  padding: 2rem 3rem;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  font-family: 'Space Grotesk', sans-serif;
}

/* Fix top row layout */
.dashboard-page .dashboard-top {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Standardise cards */
.dashboard-page .glass-box {
  background: linear-gradient(145deg, #dcdcdc, #f5f5f5); /* subtle metallic vibe */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  padding: 1rem 1.5rem;
  min-width: 200px;
  text-align: left;
  color: #000;
}

/* Optional: tighter vertical spacing for sub rows */
.dashboard-page .dashboard-sub {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}


@media (max-width: 768px) {
  .news-content {
    display: block !important;
    width: 100% !important;
    padding: 1rem;
  }

  .side-articles,
  .main-article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 2rem auto !important;
    float: none !important;
    display: block !important;
    text-align: center !important;
  }

  .side-article,
  .main-article img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .main-article p,
  .side-article p {
    font-size: 1rem !important;
    margin: 1rem 0 !important;
  }


}